<template>
  <div class="event">
    <article class="slideshow">
      <swiper
        indicator-dots="true"
        autoplay="true"
        interval="5000"
        duration="1000"
      >
        <block v-for="(item, index) in slideimg" :index="index" :key="index">
          <swiper-item>
            <img :src="item.url" mode="widthFix" />
          </swiper-item>
        </block>
      </swiper>
    </article>
    <section class="eventContent">
      <header>热门活动</header>
      <hr />
      <ul v-for="(item,index) in eventTitle" :index="index" :key="index">
        <li @click="linkTo">
          <div class="left">
            <p>{{index+1}}</p>
            <p>{{item.name}}</p>
            <p>{{item.browse}}</p>
          </div>
          <div class="right">
            <img src="/static/images/fire.png" alt />
          </div>
        </li>
      </ul>
    </section>
    <div class="service" @click="linkToHome">
      <p>首页</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slideimg: [
        {
          url:
            "http://r.photo.store.qq.com/psc?/V12xBNEP0wyzrG/S5z.*ov051w3o7gBaJERRgks9slyUr1O6TsgvDOQiQQWz5NIZMtQ4k1kBDU5RHRawnV.ajGIPT.a3*gGkxZFWhPLb3x35Jion9.O.kOS9d8!/r"
        },
        {
          url:
            "http://r.photo.store.qq.com/psc?/V12xBNEP0wyzrG/S5z.*ov051w3o7gBaJERRnKWLnlghLLfwa5h7PzzHNLeipbZY7Csf5YhLFSG3HS7.41DVpMuVnOPxC5F6ygmFwejgUpoRPDQPBTSo4rWlPk!/r.jpg"
        }
      ],
      eventTitle: []
    };
  },

  components: {},

  methods: {
    linkTo() {
      wx.navigateTo({ url: "../eventDetail/main" });
    },
    linkToHome() {
      wx.switchTab({ url: "../home/main" });
    },
     getEventData() {
      let that = this;
      this.$fly
        .post("/getActivityList")
        .then(function(res) {
          console.log("获取活动数据成功", res);
          that.eventTitle = res.data.data
          console.log(that.eventTitle)
        })
        .catch(function(err) {
          console.log("获取活动数据失败", err);
        });
     }
  },
  onLoad() {
    this.getEventData()

  },
  created() {
    // let app = getApp()
  }
};
</script>

<style scoped>
section {
  margin: 10px;
}
header {
  padding: 5px 0;
  border-bottom: 1px solid #ecf0f1;
  color: black;
  font-weight: 600;
}
section ul li {
  border-bottom: 1px solid #ecf0f1;
  height: 40px;
  display: flex;
  align-items: center;
}
li .left {
  display: flex;
  flex: 8;
  align-items: center;
}

li .left p:nth-child(1) {
  color: orange;
}
li .left p:nth-child(2) {
  width: 300rpx;
  margin-left: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 17px;
}
li .left p:nth-child(3) {
  color: gray;
  margin-left: 5px;
  font-size: 14px;
  align-self: flex-end;
}
li .right {
  flex: 2;
  display: flex;
  justify-content: center;
}
ul li .right img {
  width: 30px;
  height: 30px;
}
.service {
  position: fixed;
  top: 430px;
  right: 0;
}
.service p {
  width: 40px;
  height: 40px;
  background-color: #76d7c4;
  color: white;
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
  margin: 5px;
  font-size: 15px;
  opacity: 0.8;
}
</style>
